<template>
  <!-- 评价 -->
  <div class="box">
    <div class="head">
      <van-icon @click="router.back()" name="arrow-left" />
      <span>评价</span>
      <van-icon name="ellipsis" style="transform: rotate(90deg)" />
    </div>
    <div class="infobox">
      <div class="imgbox">
        <img :src="info?.packageId?.img" v-if="info?.packageId?.img" alt="" />
        <img :src="info?.serviceId?.photoUrl" v-if="info?.serviceId?.photoUrl" alt="" />

        <p>{{ info?.packageId?.name }}</p>
        <br />
        <p>{{ info?.packageId?.description }}</p>
      </div>
      <div class="pjbox">
        <van-checkbox v-model="checked" class="check">匿名评价</van-checkbox>
        <span></span>
        <van-rate v-model="value" allow-half />
        <div class="pj">
          <van-field
            v-model="message"
            rows="2"
            autosize
            label="评价"
            type="textarea"
            maxlength="50"
            placeholder="请输入你的评价信息"
            show-word-limit
            style="height: 100px; width: 80%"
          />
          <!-- <van-uploader :after-read="afterRead" show-upload /> -->
          <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1:3000/zjm/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </div>
      </div>
    </div>
    <button class="pjbtn" @click="topj">立即评价</button>
  </div>
</template>

<script setup >
import { ref, reactive, shallowRef } from "vue";
import { useRoute, useRouter } from "vue-router";
import axios from "axios";
import { showToast } from "vant";

axios.defaults.baseURL = "http://localhost:3000/shopfront";
const router = useRouter();
const route = useRoute();
const info = ref(JSON.parse(route.query.info));
const checked = ref(false); //匿名
const message = ref(""); //评价
const value = ref(); //评分
const imageUrl  = ref("");
const image=ref('')

import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
const handleAvatarSuccess = (response, uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw);
  image.value = 'http://127.0.0.1:3000/' + response.path;
};
import { useCounterStore } from "@/stores/counter";
const countstore= useCounterStore();


const topj = async () => {
  if (!message.value) {
    showToast("请输入评价");
    return;
  }
  if (!value.value) {
    showToast("请选择评分");
    return;
  }
  if (info.value.serviceId) {
    let obj = {
      userId: countstore.info._id || "66cc6d2aed64007ac520c753", //用户id
      stylistId: info.value?.stylistId?._id, //理发师id
      salonId: info.value?.salonId?._id, //店铺id
      serviceId: info.value?.serviceId?._id, //服务id
      orderId: info.value?._id, //订单id
      content: message.value, //评价内容
      image: image.value, //图片
      rating: value.value, //评分
      flag: checked.value, //是否匿名
    };
    const {
      data: { code },
    } = await axios.post("/addreview", obj);
    if (code == 200) {
      const res = await axios.put(`/chanpj?_id=${info.value._id}`);
      if (res.data.code == 200) {
        router.push("/cut");
      }
    }
  } else {
    let obj = {
      userId: "66cc6d2aed64007ac520c753", //用户id
      stylistId: info.value?.stylistId?._id, //理发师id
      salonId: info.value?.salonId?._id, //店铺id
      packageId: info.value?.packageId?._id, //服务id
      orderId: info.value?._id, //订单id
      content: message.value, //评价内容
      image: image.value, //图片
      rating: value.value, //评分
      flag: checked.value, //是否匿名
    };
    console.log(obj);

    const {data: { code },} = await axios.post("/addreview", obj);
    if (code == 200) {
      const res = await axios.put(`/chanpj?_id=${info.value._id}`);
      if (res.data.code == 200) {
        router.push("/cut");
      }
    }
  }
};

const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器
  imgurl.value = file;
};

console.log(info.value);
</script>
<style  scoped>
.box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 10px;
  background-color: #f6f6f6;
  position: relative;
}
.head {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.3rem;
  background-color: #f6f8fa;
  box-sizing: border-box;
  padding: 0 10px;
}
.infobox {
  width: 100%;
  height: 75%;
  margin: 10px 0;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
}
.infobox img {
  width: 30%;
  height: 80%;
}
.imgbox {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.pjbox {
  width: 100%;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  position: relative;
}
.pjbox .check {
  position: absolute;
  right: 10px;
  top: 10px;
}
.pj {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 60%;
  background-color: #fff;
}
.pjbtn {
  width: 80%;
  height: 40px;
  background-color: #e8a509;
  border: none;
  border-radius: 20px;
  color: #fff;
  font-size: 1.2rem;
  margin-top: 10px;
  margin-left: 10%;
}

>>>.avatar-uploader .avatar {
  width: 78px;
  height: 78px;
  display: block;
}
>>>.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>